<template>
  <nav class="navbar navbar-expand-lg" style="background-color: #e9f5fa">
    <div class="container">
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav m-auto">
          <li class="nav-item">
            <router-link class="nav-link" to="/"><i class="fas fa-home"></i> Home</router-link>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false"><i class="fas fa-search"></i> Intelligence Search</a>
            <div class="dropdown-menu" aria-labelledby="dropdown2">
              <router-link to="/search/vulnerability" class="dropdown-item"><i class="fas fa-dice-d6"> Vulnerability
                Search</i></router-link>
              <router-link to="/search/product" class="dropdown-item"><i class="fas fa-dice-d6"> Product
                Search</i></router-link>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false"><i class="fas fa-tools"></i> Tools</a>
            <div class="dropdown-menu" aria-labelledby="dropdown1">
              <a class="dropdown-item"><i class="fas fa-pencil-alt">Online Annotation</i></a>
              <a class="dropdown-item" href="#"><i class="fas fa-spider"> Web Crawler</i></a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#"><i class="fas fa-question-circle"></i> FAQ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled"><i class="fas fa-book-open"></i> About</a>
          </li>
          <li class="nav-item">
            <router-link to="/d3" class="nav-link"><i class="fas fa-book-open"></i> D3</router-link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'nav-bar'
}
</script>

<style scoped>
nav .nav-item {
  margin: 0 30px 0;
}

nav a {
  color: black;
  font-size: 18px;
  font-weight: bold;
}
</style>
